<template>
  <div class="sign-in-subscribe-shift-card">
    <c-title text="转出"></c-title>
    <van-cell title-style="text-align:left" title="提现地址" is-link to="index" />
    <div class="main">
      <div class="flex between">
        <span>提现数量</span>
        <input type="text" placeholder="请输入数量" />
        <span>元宝枫</span>
      </div>
      <div class="flex between  mt-30">
        <span>到账数量</span>
        <input type="text" class="ml-45" />
        <span>元宝枫</span>
      </div>
      <div class="flex between mt-30">
        <span>支付密码</span>
        <input :type="password_flag" placeholder="请输入支付密码" />
        <div @click="password_switch">
          <img v-if="password_flag == 'text'" src="../../assets/images/view_password.png" style="width: 1.25rem;" />
          <img v-else src="../../assets/images/no_view_password.png" style="width: 1.25rem;" />
        </div>

      </div>
      <div class="flex between  mt-30">
        <span>验证码</span>
        <input type="text" class="ml-45" placeholder="请输入验证码" />
        <span>获取验证码</span>
      </div>
    </div>
    <van-button class="btn" color="#F25C5C">确认转出</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password_flag: "password"
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    password_switch() {
      if (this.password_flag == 'password') {
        this.password_flag = 'text';
      } else {
        this.password_flag = 'password';
      }
      console.log(this.password_flag);

    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-icon-success::before {
  position: absolute;
  content: '' !important;
  background: #fff;
  width: 0.3125rem;
  left: 50%;
  top: 50%;
  height: 10px;
  border-radius: 100px;
  transform: translate(-50%, -50%);
}

.sign-in-subscribe-shift-card {
  input {
    border: none;
  }

  padding: 0.5rem;

  .van-radio__icon--checked {
    position: relative;
  }

  .mt-30 {
    margin-top: 1.875rem;
  }

  .between {
    justify-content: space-between;
  }

  .flex {
    display: flex;
  }

  .ml-45 {
    margin-left: 2.8125rem;
  }

  .btn {
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
  }

  .main {
    margin-top: 0.5625rem;
    border-radius: 0.3125rem;
    background: #fff;
    padding: 1.3rem 1rem 2.0625rem 1.5rem;
  }

  .box {
    display: flex;
    justify-content: space-between;
  }

  .count {
    margin-top: 0.4375rem;
  }

  .box-item {
    width: 32%;
    height: 4.9375rem;
    padding-top: 0.4375rem;
    padding-left: 0.625rem;
    background: #fff;
    border-radius: 0.3125rem;
    text-align: left;
  }
}
</style>
